/**
* @description: 工程列表新增设为关注
* @author: JiWei
* @remark:
**/
<template>
  <view class="engineering-main">
    <nav-bar class="header" :background="backgroundColor" back title="工程列表" @goBack="goBack">
      <slot slot="choose_text">
        <view @click="selectAll" class="nav-header" :class="{selectall:isShow}">
          <img :src="isShow === false?imgUrl:chooseImgUrl" alt="">
          <text>全选</text>
        </view>
      </slot>
    </nav-bar>
    <view class="work-content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
          <view class="task-list"
                :class="['item',{chooseList: item.selected}]"
                v-for="(item,index) in taskList" :key="index"
                @click="chooseItem(index)">
            <view class="task-text">
              <img src="../../../../static/controlImg/swgz.png" alt="">
              <text>{{item.title}}</text>
            </view>
          </view>
        </van-list>
      </van-pull-refresh>
<!--      <view class="task-list"-->
<!--            v-for="(item,index) in taskList" :key="index"-->
<!--            @click="chooseItem(index)"-->
<!--            :class="['item',{chooseList: item.selected}]">-->
<!--          <view class="task-text">-->
<!--            <img src="../../../../static/controlImg/swgz.png" alt="">-->
<!--            <text>{{item.title}}</text>-->
<!--          </view>-->
<!--      </view>-->
    </view>
    <footer>
      <van-button block native-type="submit" @click="goToJump">设为关注</van-button>
    </footer>
  </view>
</template>
<script>
import {mapGetters} from "vuex";
import navBar from "../../../../components/common/nav-bar.vue";
import {Toast} from "vant";
export default {
  name: 'newWorks',
  components: {navBar },
  props: {},
  data() {
    return {
      frequency:'second',
      backgroundColor:'#417ADC',
      isShow: false,//顶部导航控制
      imgUrl: require('../../../../static/controlImg/selectall_false.png'),
      chooseImgUrl: require('../../../../static/controlImg/selectall_true.png'),
      refreshing: false, // 是否正在刷新
      isLoading: false,
      finished: false,
      total: 0, // 总条数
      page: 1,
      limit: 20,
      taskList:[
        // {
        //   title:'山西太原娄烦县潘家庄等低压线路改造工程...',
        //   selected: false,
        //   id:1,
        // },
      ],
      selectedIds:[],
    };
  },
  computed: {
    ...mapGetters(["userData"])
  },
  watch: {},
  onLoad() {
    this.getUnLookT()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/workbench/projectList/index'
      })
    },
    getUnLookT() {
      let params = {
        "deptId": this.userData.DEPTID, //部门id
        "userId": this.userData.USERID, //用户id
        "page": this.page,
        "row": this.limit
      }
      this.$apiRequest.gcgkApi.getUnLook(params).then(res => {
        if(res.code === 0) {
          this.taskList = res.data.map(item => {
            item.title = item.engName;
            item.id = item.objId;
            item.selected = false;
            return item;
          })
          this.isLoading = false;
          this.refreshing = false;
        }
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.page = 1;
      this.taskList = [];
      this.getUnLookT();
    },
    loadMore() {
      if (this.total > this.taskList.length) {
        this.page = this.page + 1;
      } else {
        this.finished = true;
      }
    },
    chooseItem(index) {
      const selectedItem = this.taskList[index];
      selectedItem.selected = !selectedItem.selected;
      if (selectedItem.selected) {
        this.selectedIds.push(selectedItem.id);
      } else {
        const idIndex = this.selectedIds.indexOf(selectedItem.id);
        if (idIndex !== -1) {
          this.selectedIds.splice(idIndex, 1);
        }
      }
      this.isShow = this.selectedIds.length === this.taskList.length;
    },
    selectAll() {
      this.isShow = !this.isShow
      this.taskList.forEach(item => {
        item.selected = this.isShow;
      });
      if (this.isShow) {
        this.selectedIds = this.taskList.map(item => item.id);
      } else {
        this.selectedIds = [];
      }
    },
    goToJump() {
      console.log(this.selectedIds)
      let params = {
        "userId": this.userData.USERID, //用户id
        "deptId": this.userData.DEPTID, //部门id
        "roleId": this.userData.ROLEID, //角色id
        "engs": this.selectedIds.map(id => {
          return {engId: id}
        })
      }
      this.$apiRequest.gcgkApi.setLook(params).then(res => {
        if(res.code === 0) {
          Toast.success('设置关注成功');
          uni.navigateTo({
            url: `/pages/communicationControl/workbench/projectList/index`
          })
        }
      })
    }
  }
};
</script>
<style scoped lang="scss">
.engineering-main {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  .nav-header {
    margin-right: px2vw(30);
    img {
      width: px2vw(62);
      height: px2vh(45);
      vertical-align: middle;
      margin-right: px2vw(10);
    }
    text {
      vertical-align: middle;
    }
  }
  .selectall {
    color: #FFFC16;
  }
  .work-content {
    width: calc(100vw - #{px2vw(60)});
    margin-left: px2vw(30);
    height: calc(100vh - #{px2vh(380)});
    margin-top: px2vh(30);
    overflow: auto;
    .task-list {
      height: px2vh(140);
      background: #fff;
      border-radius: px2vw(20);
      margin-bottom: px2vh(30);
      .task-text {
        padding: px2vh(40) px2vw(40);
        font-size: px2vh(42);
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        img {
          width: px2vw(64);
          margin-right: px2vw(20);
          vertical-align: middle;
        }
      }
    }
    .chooseList {
      border: px2vh(4) solid #417ADC;
    }
  }
  footer {
    flex-shrink: 0;
    height: px2vh(180);
    background: #FFFFFF;
    border-top:px2vh(1) solid #E5E5E5;
    box-sizing:border-box;
    padding-top: px2vh(28);
    /deep/ .van-button {
      width: calc(100% - #{px2vw(60)});
      margin-left: px2vh(30);
      height: px2vh(120);
      color: #fff;
      background-color: #417ADC;
      border: 1px solid #417ADC;
      border-radius: px2vh(60);
    }
  }
}
</style>
